<template>
  <el-card>
    <div class="wrapper">
      <div class="left-side">
        <div class="side-wrapper">
          <div class="side-menu">
            <a href="#">
              <svg t="1637853210343" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="12136" width="50" height="50">
                <path
                    d="M905.734648 525.745973l-331.402909-287.91565c-36.089427-31.390803-89.773699-31.390803-125.863126 0l-331.302939 287.91565c-13.9959 12.196427-21.993557 29.791272-21.993556 48.285854l-0.099971 417.977545c0 17.694816 14.295812 31.990628 31.990628 31.990628h769.374597c17.694816 0 31.990628-14.395782 31.990628-32.090598l-0.699795-417.977546c0-18.494582-8.097628-36.089427-21.993557-48.185883zM448.568583 943.723519V783.070585c0-34.889778 28.291711-63.281461 63.281461-63.281461 34.889778 0 63.281461 28.291711 63.28146 63.281461V943.723519c0 8.797423-7.197891 15.995314-15.995313 15.995313h-94.472323c-8.897393 0-16.095285-7.197891-16.095285-15.995313z m190.544177 0.299912v-160.952846c0-70.27941-56.983306-127.262716-127.262716-127.262716s-127.262716 56.983306-127.262716 127.262716v160.952846c0 8.797423-7.197891 15.995314-15.995314 15.995314H175.048716c-8.797423 0-15.995314-7.197891-15.995314-15.995314V588.627551c0-9.297276 3.998828-18.094699 10.996779-24.192913l299.31231-260.123792c24.092942-20.893879 59.882456-20.893879 83.975398 0L852.750171 564.434638c6.99795 6.098213 10.996778 14.895636 10.996778 24.092942l0.599824 355.39588c0 8.797423-7.197891 15.995314-15.995313 15.995314H655.108074c-8.897393 0.099971-15.995314-7.097921-15.995314-15.895343z"
                    p-id="12137" fill="#1296db"></path>
                <path
                    d="M914.732012 354.196232V95.971883c0-17.694816-14.295812-31.990628-31.990628-31.990628H767.775066c-17.694816 0-31.990628 14.295812-31.990628 31.990628v104.869277c0 6.798008-7.997657 10.496925-13.196134 6.098213L593.925998 98.37118c-47.686029-40.188226-117.365616-40.188226-165.051645 0L11.29669 450.667968c-7.197891 5.998243-11.29669 14.995607-11.29669 24.292883v0.399883c0 27.092063 31.690716 41.787757 52.384653 24.292883l397.183638-335.001855c35.789515-30.191155 87.974226-30.191155 123.763741 0L735.784438 301.811579l178.947574 150.955774 57.483159 48.085913c20.394025 17.094992 51.484917 2.499268 51.484917-24.092942v-0.799766c0-9.597188-4.098799-18.494582-11.296691-24.492824-20.893879-17.594845-65.380845-55.183833-86.274724-72.778678-7.197891-6.098213-11.396661-15.095577-11.396661-24.492824z m-114.966318-83.975398V131.961339c0-2.199356 1.799473-3.998828 3.998828-3.998828h42.987406c2.199356 0 3.998828 1.799473 3.998829 3.998828v174.548863c0 3.399004-3.998828 5.298448-6.598067 3.099092l-42.987406-36.289368a4.098799 4.098799 0 0 1-1.39959-3.099092z"
                    p-id="12138" fill="#1296db"></path>
              </svg>
              主页
            </a>
            <a href="#">
              <svg t="1637853138268" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="8664" width="50" height="50">
                <path
                    d="M295.2192 394.79296h-183.296c-17.92 0-32.768-14.848-32.768-32.768 0-17.92 14.848-32.768 32.768-32.768h183.296c17.92 0 32.768 14.848 32.768 32.768s-14.848 32.768-32.768 32.768z"
                    fill="#1296db" p-id="8665"></path>
                <path
                    d="M111.9232 598.56896c-17.92 0-32.768-14.848-32.768-32.768v-203.776c0-17.92 14.848-32.768 32.768-32.768 17.92 0 32.768 14.848 32.768 32.768v203.776c0 17.92-14.336 32.768-32.256 32.768 0 0.512-0.512 0.512-0.512 0zM630.5792 642.60096c-17.92 0-32.768-14.848-32.768-32.768v-410.624c0-2.048-1.536-3.584-3.072-3.584h-0.512c-0.512 0-1.024 0-1.536 0.512-0.512 0.512-1.024 0.512-1.536 1.024l-276.992 192c-15.36 10.24-35.84 5.632-46.08-9.216-9.728-14.848-6.144-34.304 7.68-44.544l279.04-194.048c1.024-0.512 1.536-1.024 3.072-1.536 10.752-6.656 23.552-10.24 36.352-10.24 37.888 0 69.12 31.232 69.12 69.12v411.136c1.024 17.408-12.8 32.256-30.208 33.28-1.024-0.512-1.536-0.512-2.56-0.512zM295.2192 754.21696h-183.296c-17.92 0-32.768-14.848-32.768-32.768 0-17.92 14.848-32.768 32.768-32.768h183.296c17.92 0 32.768 14.848 32.768 32.768 0 18.432-14.848 32.768-32.768 32.768z"
                    fill="#1296db" p-id="8666"></path>
                <path
                    d="M111.9232 754.21696c-17.92 0-32.768-14.848-32.768-32.768v-203.776c0-17.92 14.848-32.768 32.768-32.768 17.92 0 32.768 14.848 32.768 32.768v203.776c0 17.92-14.848 32.768-32.768 32.768zM594.7392 954.92096c-12.8 0-25.6-3.584-36.864-10.24-1.024-0.512-1.536-1.024-3.072-1.536l-279.04-194.048c-14.848-10.752-17.408-31.744-6.656-46.08 10.24-13.824 30.208-17.408 44.544-7.68l276.992 193.024c0.512 0.512 1.024 0.512 1.536 1.024 0.512 0.512 1.024 0.512 1.536 0.512 2.048 0 3.584-1.536 3.584-3.584v-411.136c0-17.92 14.848-32.768 32.768-32.768 17.92 0 32.768 14.848 32.768 32.768v410.624c0.512 37.888-29.696 69.12-67.584 69.632 0.512-0.512 0-0.512-0.512-0.512z"
                    fill="#1296db" p-id="8667"></path>
                <path
                    d="M693.0432 697.38496c-17.92 0-32.768-14.848-32.768-32.768 0-15.872 11.264-29.184 27.136-32.256 49.664-8.704 82.944-55.808 74.24-105.472-6.656-37.888-36.352-67.584-74.24-74.24-17.92-2.56-30.208-19.456-27.648-37.376s19.456-30.208 37.376-27.648c0.512 0 1.024 0 1.536 0.512 85.504 14.848 142.848 96.256 128 181.76-11.264 65.536-62.464 116.736-127.488 128-2.048-0.512-4.096-0.512-6.144-0.512zM971.0592 574.50496h-99.328c-17.92 0-32.768-14.848-32.768-32.768 0-17.92 14.848-32.768 32.768-32.768h99.328c17.92 0 32.768 14.848 32.768 32.768 0 17.92-14.336 32.768-32.768 32.768zM841.0112 260.13696c-8.704 0-16.896-3.584-23.04-9.728-12.8-12.8-12.8-33.792 0-46.592l68.096-68.096c13.312-12.288 34.304-11.776 46.592 1.536 11.776 12.8 11.776 32.256 0 45.056l-68.096 68.096c-6.144 6.144-14.848 9.728-23.552 9.728zM909.1072 957.48096c-8.704 0-16.896-3.584-23.04-9.728l-68.096-68.096c-12.288-13.312-11.776-34.304 1.536-46.592 12.8-11.776 32.256-11.776 45.056 0l68.096 68.096c12.8 12.8 12.8 33.792 0 46.592-6.656 6.656-14.848 9.728-23.552 9.728z"
                    fill="#1296db" p-id="8668"></path>
                <path
                    d="M394.752 383.488l114.176-51.2c31.744 0 57.344 25.6 57.344 57.344v302.592c0 31.744-25.6 57.344-57.344 57.344l-114.176-51.2c-31.744 0-57.344-25.6-57.344-57.344V440.832c0-31.744 25.6-57.344 57.344-57.344z"
                    fill="#1296db" p-id="8669"></path>
              </svg>
              比赛通知
            </a>
            <a href="#">
              <svg t="1637853315200" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="14619" width="50" height="50">
                <path
                    d="M928 981.333333H277.333333a21.333333 21.333333 0 0 1 0-42.666666h650.666667a10.666667 10.666667 0 0 0 10.666667-10.666667V277.333333a21.333333 21.333333 0 0 1 42.666666 0v650.666667a53.393333 53.393333 0 0 1-53.333333 53.333333z m-74.666667-181.333333V96a53.393333 53.393333 0 0 0-53.333333-53.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333333v704a53.393333 53.393333 0 0 0 53.333333 53.333333h704a53.393333 53.393333 0 0 0 53.333333-53.333333z m-53.333333-714.666667a10.666667 10.666667 0 0 1 10.666667 10.666667v704a10.666667 10.666667 0 0 1-10.666667 10.666667H96a10.666667 10.666667 0 0 1-10.666667-10.666667V96a10.666667 10.666667 0 0 1 10.666667-10.666667z m-117.333333 533.333334a21.333333 21.333333 0 0 0-21.333334-21.333334H234.666667a21.333333 21.333333 0 0 0 0 42.666667h426.666666a21.333333 21.333333 0 0 0 21.333334-21.333333z m0-213.333334a21.333333 21.333333 0 0 0-21.333334-21.333333H533.333333a21.333333 21.333333 0 0 0 0 42.666667h128a21.333333 21.333333 0 0 0 21.333334-21.333334z m0-170.666666a21.333333 21.333333 0 0 0-21.333334-21.333334H533.333333a21.333333 21.333333 0 0 0 0 42.666667h128a21.333333 21.333333 0 0 0 21.333334-21.333333zM412.393333 468.133333A21.333333 21.333333 0 0 0 426.666667 448V234.666667a21.333333 21.333333 0 0 0-42.666667 0v152.52L251.333333 221.333333a21.333333 21.333333 0 0 0-38 13.333334v213.333333a21.333333 21.333333 0 0 0 42.666667 0V295.48L388.666667 461.333333a21.333333 21.333333 0 0 0 23.72 6.806667z"
                    fill="#1296db" p-id="14620"></path>
              </svg>
              竞赛新闻
            </a>
              <router-link :to="{path:'/second/work'}">
              <svg t="1637853512936" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="16254" width="50" height="50">
                <path
                    d="M360.32 732.16 360.32 584.64 360.32 480.384c0-31.04-25.216-56.192-56.256-56.192L232.64 424.192c-30.976 0-56.192 25.152-56.192 56.192l0 104.256 0 147.584 0 99.584L360.32 831.808 360.32 732.16z"
                    p-id="16255" fill="#1296db"></path>
                <path
                    d="M603.904 382.016 603.904 357.376l0-227.2c0-31.04-25.216-56.256-56.192-56.256L476.224 73.92c-31.04 0-56.192 25.216-56.192 56.256l0 227.2 0 24.576 0 449.728 183.808 0L603.84 382.016z"
                    p-id="16256" fill="#1296db"></path>
                <path
                    d="M840.512 557.632 840.512 424.192 840.512 305.856c0-31.04-25.216-56.192-56.192-56.192l-71.488 0c-30.976 0-56.256 25.152-56.256 56.192l0 118.336 0 133.44 0 274.112 183.936 0L840.512 557.632z"
                    p-id="16257" fill="#1296db"></path>
                <path d="M64 889.152l896 0 0 60.928-896 0 0-60.928Z" p-id="16258" fill="#1296db"></path>
              </svg>
              成果展示
               </router-link>
            <a href="#">
              <svg t="1637853561563" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="17275" width="50" height="50">
                <path
                    d="M517.8 586.8c-8.4 0-16.6-2.1-23.9-6.1L52 339.9c-16.3-8.8-26.2-25.8-25.9-44.4 0.2-18.6 10.7-35.3 27.4-43.7L500.1 27.1c14.2-7.1 30.9-7.1 44.9 0l442 224.6c16.6 8.4 27 25.2 27.2 43.8 0.2 18.7-9.9 35.7-26.2 44.4L541.5 580.7c-7.2 4-15.4 6.1-23.7 6.1z m4.8-525c-1.6 0-3.1 0.4-4.6 1.1L71.5 287.5c-3.3 1.7-5.3 4.9-5.4 8.5v0.2c-0.1 3.5 1.9 6.9 4.9 8.5h0.1l442 240.9c1.4 0.8 3 1.2 4.7 1.2 1.6 0 3.2-0.4 4.5-1.2l0.1-0.1 446.8-240.9c3.1-1.7 5.1-5 5-8.8 0-3.6-2.1-6.9-5.3-8.5L527 62.8c-1.4-0.7-2.9-1-4.4-1z"
                    fill="#1296db" p-id="17276"></path>
                <path
                    d="M512.7 805.7c-8.4 0-16.6-2.1-23.9-6.1L46.9 558.7c-16.4-8.8-26.3-25.9-26-44.5 0.2-18.5 10.7-35.2 27.4-43.6l93.4-47 18 35.7-93.3 46.9c-3.3 1.7-5.3 4.9-5.4 8.4v0.2c-0.1 3.6 1.9 6.9 5 8.6l0.1 0.1 442 241c1.4 0.8 3 1.2 4.7 1.2 1.6 0 3.2-0.4 4.5-1.2l0.1-0.1 446.7-240.9c3.2-1.7 5.1-5 5.1-8.7-0.1-3.6-2.2-6.9-5.4-8.6l-88.3-44.9 18.1-35.7 88.3 44.9c16.4 8.4 26.9 25.1 27.2 43.5v0.2c0.2 18.7-9.9 35.7-26.2 44.4L536.4 799.7c-7.2 3.9-15.4 6-23.7 6z"
                    fill="#1296db" p-id="17277"></path>
                <path
                    d="M520.1 1021.9c-8.4 0-16.6-2.1-23.9-6.1L54.3 774.9c-16.4-8.8-26.3-25.9-26-44.5 0.2-18.5 10.7-35.2 27.4-43.6l93.4-47 18 35.7-93.3 46.9c-3.3 1.7-5.3 4.9-5.4 8.4v0.2c-0.1 3.6 1.9 6.9 5 8.6l0.1 0.1 442 241c1.4 0.8 3 1.2 4.7 1.2 1.6 0 3.2-0.4 4.5-1.2l0.1-0.1 446.7-240.9c3.2-1.7 5.1-5 5.1-8.7-0.1-3.6-2.2-6.9-5.4-8.6l-88.3-44.9L901 642l88.3 44.9c16.4 8.4 26.9 25.1 27.2 43.5v0.2c0.2 18.7-9.9 35.7-26.2 44.4l-446.5 240.8c-7.3 4-15.5 6.1-23.7 6.1z"
                    fill="#1296db" p-id="17278"></path>
              </svg>
              资料信息
            </a>
          </div>
        </div>
        <div class="side-wrapper">
          <div class="side-menu">
            <div class="side-title">参赛队伍</div>
            <div class="user" v-for="(team,index) in teams" :key="index">
              <img :src="team.photo" class="user-img">
              <div class="username">{{ team.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <!--    展示区域-->
      <div class="main-container">
        <transition name="animate__animated animate__bounce"
                    enter-active-class="animate__fadeInLeftBig"
                    leave-active-class="animate__fadeOut" appear>
                  <router-view></router-view>
        </transition>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "second",
  data() {
    return {
      teams: [
        {name: '杨超月队', photo: 'https://i.postimg.cc/FRqMnv3B/team1.jpg'},
        {name: '张姆斯队', photo: 'https://i.postimg.cc/SxFyx6Xv/team2.jpg'},
        {name: '王兵兵队', photo: 'https://i.postimg.cc/mrVRjKmv/team3.jpg'},
        {name: '晓东队', photo: 'https://i.postimg.cc/90whW0c2/team4.jpg'},
        {name: '王一伯队', photo: 'https://i.postimg.cc/YCHhsKx0/team5.jpg'},
      ]
    }
  },
}
</script>

<style scoped>
.el-card{
  max-height: 600px;
  overflow: auto;
}
.wrapper {
  width: 100%;
  display: flex;
  flex-grow: 1;
  overflow: auto;
}

.left-side {
  width: 160px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  overflow: auto;
  flex-shrink: 0;
}

.side-wrapper:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.side-wrapper svg {
  width: 20px;
  fill: var(--body-color);
  margin-right: 25px;
  flex-shrink: 0;
}

.side-menu a {
  text-decoration: none;
  font-weight: 500;
  color: var(--main-color);
  display: flex;
  align-items: center;
  font-size: 15px;
  white-space: nowrap;
  margin-top: 10px;
}

.side-menu a:hover {
  color: #1296db;
}

.side-menu {
  padding: 20px;
}

.user {
  display: flex;
  align-items: center;
}

.user:hover {
  background: #e2e2e2;
}

.user + .user {
  margin-top: 15px;
  cursor: pointer;
}

.user-img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-right: 16px;
  object-fit: cover;
  object-position: center;
}
.main-container {
  padding: 25px;
  flex-grow: 1;
  overflow: auto;
}
</style>